<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器：   语法：任意选择器：hover 【悬停】  每个伪类选择器，具备特点
			                 所有元素具备hover  【常见伪类选择器】*/
		h1:hover{
			background: #ffaa00;
			color: #00ffff;
		}
		
		/*
		 伪类选择器：  ：link    链接未点击时状态
		              ：active  链接被点击时状态
					  ：visted  链接点击后状态
					  :hover    悬停连接时状态
		主要结合在一起，针对a元素效果			  		  
		 */
		a:link{/*未访问状态*/
			color: #ffaa00;
			/* 去掉超链接下划线 */
			text-decoration: none;
		}
		 a:active{/*被点击时状态*/
			 color: #00ffff;
			 background: #ffff7f;
		 } 
		 a:visited{/*点击后状态*/
			 color: #ff0000;
			 background: #ffaa00;
		 }
		 a:hover{
			 font-size: 36px;
		 }
		 
		 /**
		  * 伪类选择器： input：focus 获取焦点 鼠标点击输入框时效果
		  * 
		  * 针对 输入框 input
		  */
		input:focus{
			background: #ffff7f;
		}	
		
		/* 伪类选择器：   :first-child  第一个儿子元素
		                 :last-child   最后一个元素
						 :nth-child(n) 匹配n个儿子元素
	       针对：父子级，默认父子级 table、列表..
						 */
	    li:first-child{
			background: #ff0000;
			color: #ffaa00;
		}
		li:last-child{
			font-size: 15pt;
		}
		li:nth-child(2){
			background: #ffff7f;
			font-size: 15px;
		}
		li:nth-child(3){
			background: #00ffff;
			font-size: 15px;
		}
		
		</style>
		
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		超链接
		<input type="text">
		<!-- 元素之间存在父子级关系，默认存在父子关系 -->
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
		</ol>
	</body>
</html>